<template>
  <div class="main-body">
    <div class="container-bg"></div>
    <div class="nav-container">
      <router-link to="/administrator"><img src="../../assets/logo.png" class="logo-image"/></router-link>
      <div class="nav-menu">
        <router-link to="/administrator/stores" class="router-link"><el-button type="text">商家审核</el-button></router-link>
        <router-link to="/administrator/ads" class="router-link"><el-button type="text">广告审核</el-button></router-link>
        <router-link to="/administrator/complains" class="router-link"><el-button type="text">投诉审核</el-button></router-link>
      </div>
      <div class="nav-user-info">
        <span class="user-name">早上好, {{ this.$store.state.currentUser.username ? this.$store.state.currentUser.username : 'Admin' }} !</span>
        <span class="user-logio" v-if="this.$store.state.currentUser.username" @click="muiscPlay">登出</span>
        <img :src="this.$common.getResourceUrl(this.$store.state.currentUser.image)" class="user-image" v-if="this.$store.state.currentUser.username"/>
        <img src="../../assets/images/customer/default_user_icon.png" class="user-image" v-else/>
      </div>
      <audio src="http://boscdn.bpc.baidu.com/v1/developer/b3e8bca0-d8b9-40dc-be45-05cc9b5e205b.mp3" ref="st"></audio>
      <audio src="http://boscdn.bpc.baidu.com/v1/developer/f16d0ed1-9e80-4d35-8a48-3e882b9a3293.mp3" ref="ad"></audio>
      <audio src="http://boscdn.bpc.baidu.com/v1/developer/e6a09057-7ab3-4230-9ce1-fc03af13a3fd.mp3" ref="cp"></audio>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'AdministratorIndex',
  data () {
    return {
      wsdata: '',
      mp3data: ''
    }
  },
  created () {
    this.initWebSocket()
  },
  methods: {
    initWebSocket () {
      const wsuri = 'ws://10.222.29.161:8989/pushSocket'
      this.websock = new WebSocket(wsuri)
      this.websock.onmessage = this.websocketonmessage
      this.websock.onclose = this.websocketclose
    },
    websocketonmessage (e) {
      this.wsdata = JSON.parse(e.data)
      this.$notify({
        title: 'websocket--类型是：' + this.wsdata.messageType,
        message: this.wsdata.message,
        type: 'success'
      })
      if (this.wsdata.messageType === 'st') {
        this.$router.push('/administrator/stores')
        this.$refs.st.play()
      } else if (this.wsdata.messageType === 'ad') {
        this.$router.push('/administrator/ads')
        this.$refs.ad.play()
      } else if (this.wsdata.messageType === 'cp') {
        this.$router.push('/administrator/complains')
        this.$refs.cp.play()
      } else {
        console.log('ws')
      }
    },
    websocketsend (agentData) {
      this.websock.send(agentData)
    },
    websocketclose (e) { // 关闭
    },
    logout () {
      this.$administratorAPI.user_logout().then((params) => {
        this.$store.state.currentUser = {
          username: '',
          image: ''
        }
      })
    }
  }
}
</script>

<style scoped>
  .container-bg {
    width: 100%;
    height: 600px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-image: url("../../assets/images/administrator/header_bg.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  a {
    text-decoration: none;
  }
  .nav-container {
    width: 100%;
    padding: 35px 0;
    margin-bottom: 35px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .logo-image {
    width: 284px;
    height: 58px;
    padding: 0 150px;
  }
  .nav-user-info {
    padding: 0 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .user-name {
    font-size: 16px;
    letter-spacing: 1px;
    color: white;
    margin-right: 32px;
  }
  .user-logio {
    font-size: 15px;
    letter-spacing: 3px;
    color: white;
    margin-right: 32px;
    cursor: pointer;
  }
  .user-image {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
  }
  .nav-menu {
    margin-right: 330px;
  }
  .router-link :hover{
    background: white;
    color: #090909;
    transform: scale(0.8);
  }
  .el-button{
    margin-right: 30px;
    padding: 15px 10px;
    color: #fff;
    font-size: 18px;
  }
</style>
